<template>
  <div class="basic-setting-content pl16 pr16" style="padding: 0px;">
    <el-card>
      <!--商品详情-->
      <div class="common-form">商品详情</div>
      <!-- <el-form-item label="详情类型：">
        <el-radio-group v-model="form.model.isPicture">
          <el-radio :label="0">图文</el-radio>
          <el-radio :label="1">纯图</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <!--内容-->

      <!-- 排序 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品排序：" :rules="[{ required: true, message: ' ' }]" prop="model.productSort">
            <el-input type="number" min="0" :disabled="disabled" v-model="form.model.productSort" class="max-w460" style="width:100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发货时间：" :rules="[{ required: true, message: ' ' }]" prop="model.deliveryTime">
            <el-input-number min="0" :controls="false" :disabled="disabled" v-model="form.model.deliveryTime" class="max-w460" style="width:100%;"></el-input-number>
            <p>设置一个数值为预期时间的N天后</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.model.modelName !== '农资'">
        <el-col :span="12">
          <el-form-item label="定金比例：" :rules="[{ required: true, message: ' ' }]" prop="model.depositRatio">
            <el-input-number :min="0" :max="1" :controls="false" :disabled="disabled" v-model="form.model.depositRatio" class="max-w460" style="width:100%;"></el-input-number>
            <p>定金比例系数 <span style="color: red;">请填写小数，如 50% 请填写 0.5</span> </p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="包装费比例：" :rules="[{ required: true, message: ' ' }]" prop="model.packageRatio">
            <el-input-number :controls="false" :disabled="disabled" :min="0" :max="1" v-model="form.model.packageRatio" class="max-w460" style="width:100%;"></el-input-number>
            <p>包装费比例系数 <span style="color: red;">请填写小数，如 50% 请填写 0.5</span></p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.model.modelName !== '农资'">
        <el-col :span="24">
          <el-form-item label="适宜种植时间：" :rules="[{ required: true, message: ' ' }]" prop="model.plantTimeArry">
            <el-date-picker v-model="form.model.plantTimeArry" type="daterange" unlink-panels range-separator="~"
              :disabled="disabled" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD"
              @change="onDateChange"  />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item label="详情内容：" v-show="form.model.isPicture == 0">
        <div class="edit_container" style="width:100%;" >
          <Uediter :text="form.model.content" :config="ueditor.config" editorid="editor-demo-01" ref="ue" @contentChange="contentChangeFunc">
          </Uediter>
        </div>
      </el-form-item>
    </el-card>
    <!--商品图片组件-->
    <Upload v-if="is_upload" :config="config" :isupload="is_upload" @returnImgs="returnImgsFunc">上传图片</Upload>
  </div>
</template>

<script>
import Uediter from "@/components/UE.vue";
import Upload from "@/components/file/Upload.vue";
import draggable from "vuedraggable";
import { useCascaderAreaData } from "../../../../utils/area";
export default {
  components: {
    /*编辑器*/
    Uediter,
    Upload,
    draggable,
  },
  data() {
    return {
      /*富文本框配置*/
      ueditor: {
        text: "",
        config: {
          minFrameWidth: 700,
          initialFrameHeight: 300,
        },
      },
      is_upload: false,
      config: {
        total: 9,
        fileType: "image",
      },
      areaData: useCascaderAreaData(),
      disabled: false
    };
  },
  created() {
    this.disabled = this.$route.query.scene === 'view'
  },
  inject: ["form"],
  mounted() {
    const $this = this
    $this.$nextTick(() => {
      const ids = setTimeout(() => {
        const ue = UE.getEditor('editor-demo-01')
        if (ue && $this.disabled)
          ue.setDisabled(true)
        if (ue && $this.form.model.content)
          ue.setContent($this.form.model.content)
        clearTimeout(ids)
      }, 1500)
    })
  },
  methods: {
    onDateChange(e) {
      if (e) {
        this.form.model.plantTime = e.join('~')
      }
    },
    /*获取富文本内容*/
    contentChangeFunc(e) {
      this.form.model.content = e;
    },
    openUpload() {
      this.is_upload = true;
    },
    /*上传商品图片*/
    returnImgsFunc(e) {
      console.log(e);
      console.log(this.form.model);
      if (e != null) {
        let imgs = this.form.model.contentImage.concat(e);
        // 兼容后端
        for (let i = 0; i < imgs.length; i++) {
          if (typeof (imgs[i].imageId) == "undefined") {
            imgs[i].imageId = imgs[i].fileId;
          }
        }
        this.form.model['contentImage'] = imgs;
      }
      this.is_upload = false;
    },
    /*删除商品图片*/
    deleteImg(index) {
      this.form.model.contentImage.splice(index, 1);
    },
    handleAreaChange(e) {
      this.form.areaCity = ''
      if (e) {
        this.form.areaCity = e.join('/')
      }
    }
  },
};
</script>

<style></style>
